<template>
  <div class="share-wrap">
    <div
      v-if="true"
      class="share-title-wrap"
      :style="{ padding: isMobile ? '10px' : '40px 360px' }"
    >
      <div class="task-title">{{ showData.taskName || "任务名称：无" }}</div>
      <div class="task-action-wrap">
        <svg-icon class="uav-icon" icon-class="uav2" />
        <div class="nest-name">{{ showData.nestName || "机巢名称：无" }}</div>
        <svg-icon class="btn-icon" icon-class="brush_white" @click="refresh" />
        <svg-icon
          v-if="true"
          class="btn-icon"
          icon-class="full_screen_white"
          @click="fullScreen"
        />
      </div>
    </div>
    <div v-if="true" :class="[isMobile ? 'video_wrap_phone' : 'video_wrap_pc']">
      <video-view
        v-if="videoValid"
        ref="ref_video"
        :url="showData.videoUrl"
        view-id="aircraftVideo"
        :active-arc-url="true"
        style="
          width: 100%;
          height: 100%;
          background-color: black;
          position: relative;
        "
      />
      <div v-else class="video-text-wrap">
        <div class="video-text">直播已结束</div>
      </div>
    </div>
  </div>
</template>

<script>
import { countShareVideo, requestNestByRecord } from "@/api/flycontrol";
import VideoView from "@/views/components/NestAndAircraftSubComps/baseComps/VideoView";

export default {
  name: "SharedVideo",
  components: { VideoView },
  data() {
    return {
      showData: {
        taskName: "",
        nestName: "",
        videoUrl: "",
      },
      videoValid: true,
      videoText: "",
    };
  },
  computed: {
    isMobile() {
      return !!navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },
    recordId() {
      return this.$route.query.recordId;
    },
  },
  computer: {
    recordId() {
      return this.$route.query.recordId;
    },
  },
  mounted() {
    if (!this.recordId) {
      this.$message("地址错误，请稍后重试！");
      return false;
    }
    console.log("isMobile", this.isMobile);
    this.checkAndCount();
    // this.initData()
  },
  methods: {
    async initData() {
      // 完整地址 this.$route.fullPath
      // this.$route。que
      const params = {
        recordId: this.recordId,
      };
      const res = await requestNestByRecord(params);
      console.log("requestNestByRecord", res);
      if (res.msg === "ok" && res.data && res.data.nestName) {
        this.showData = {
          taskName: res.data.taskName,
          nestName: res.data.nestName,
          // videoUrl: 'https://qvs-live.flysee.com:447/flysee/4TADL2P001000V.flv'
          // videoUrl: 'https://live02.guihuao.com/flysee/4SEDL13001001F.flv'
          videoUrl: res.data.videoUrl,
        };
      } else {
        this.$message.error("获取信息失败");
        this.showData = {
          taskName: "任务名称",
          nestName: "机巢名称",
          videoUrl: "",
        };
      }
    },
    async checkAndCount() {
      const res2 = await countShareVideo({
        url: window.location.href,
        record_id: this.recordId,
      });
      if (res2 && res2.msg === "ok") {
        this.videoValid = true;
      } else {
        this.videoValid = false;
      }
      //
      await this.initData();
    },
    /**
     *  操作
     */
    refresh() {
      this.$refs.ref_video.refreshComp();
    },
    fullScreen() {
      const elem = document.getElementsByClassName("qn-rtplayer-media");
      const elem2 = document.getElementsByClassName("prism-player");
      if (elem && elem.length > 0 && elem[0].requestFullscreen) {
        elem[0].requestFullscreen();
      } else if (elem2 && elem2.length > 0 && elem2[0].requestFullscreen) {
        elem2[0].requestFullscreen();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.share-wrap {
  width: 100%;
  height: 100%;
  background-color: rgb(16, 45, 84);

  color: white;
  font-size: 18px;
  font-weight: bold;
  //
  display: flex;
  flex-direction: column;
  overflow: auto;
  caret-color: transparent;

  .share-title-wrap {
    height: 150px;

    .task-title {
      color: white;
      width: 100%;
      margin-bottom: 20px;
      overflow: hidden; /* 超出一行文字自动隐藏 */
      text-overflow: ellipsis; /*文字隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }

    .task-action-wrap {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 20px;
      margin-bottom: 10px;

      .uav-icon {
        width: 30px;
        height: 30px;
        margin-right: 20px;
      }

      .btn-icon {
        width: 50px;
        height: 50px;
        padding: 10px;
        cursor: pointer;

        &:hover {
          background-color: rgb(10, 30, 60);
        }
      }

      .nest-name {
        flex: 1;
        overflow: hidden; /* 超出一行文字自动隐藏 */
        text-overflow: ellipsis; /*文字隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
    }
  }

  .video_wrap_pc {
    background-color: rgb(16, 45, 84);
    margin: auto;
    height: calc(100% - 300px);
    aspect-ratio: 16/9;
  }

  .video_wrap_phone {
    background-color: rgb(16, 45, 84);
    margin: 80px auto auto auto;
    width: 100%;
    aspect-ratio: 16/9;
  }

  .video-text-wrap {
    text-align: center;
    background-color: black;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .video-text {
      padding: 6px 8px;
      border-radius: 4px;
      border: white 1px solid;
    }
  }

  .video-wrap {
    background-color: rgb(16, 45, 84);
    margin: 80px auto auto auto;
    height: calc(100% - 300px);
    aspect-ratio: 16/9;
  }
}

////所有控件
//::v-deep .webkit-media-controls {
//  display: none !important;
//}
</style>
